<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>搜索</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
		<link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
  	<!-- page集合的容器，里面放多个平行的.page，其他.page作为内联页面由路由控制展示 -->
    <div class="page-group">
    	
    	<div class="page page-current">
    		<!-- 标题栏 -->
	      <header class="bar bar-nav">
			    <a class="button button-link button-nav pull-left" href="#" onclick="javascript:window.history.back();">
			    	<span class="icon icon-left"></span>返回
			    </a>
			    <h1 class="title">搜索</h1>
		    </header>
		    
		    <!-- 搜索区域 -->
	    	<div class="bar bar-header-secondary" style="padding-left: 0;padding-right: 0;">
	    		<div class="searchbar">
						<a class="searchbar-cancel">取消</a>
						<div class="search-input">
							<label class="icon icon-search" for="search"></label>
							<input type="search" id='search' placeholder='输入关键字...'/>
						</div>
					</div>
				</div>
		    
		    <!-- 页面内容区 -->
		    <div class="content">
					<div class="content-block clear-mar-pad">
						<div class="content-block-inner clear-mar-pad" id="searchContent">
							<div class="row no-gutter pro-box">
					    	<div class="col-33 pro-cell">
					    		<span class="pro-sku">4种</span>
					    		<div class="pro-img"><img src="img/p1.png" alt="产品图" width="100%" /></div>
					    		<div class="pro-info">￥<span class="cf63">15.9</span> <span class="pull-right">月销180</span></div>
					    		<div class="pro-name">产品名</div>
					    	</div>
					    	<div class="col-33 pro-cell">
					    		<div class="pro-img"><img src="img/p1.png" alt="产品图" width="100%" /></div>
					    		<div class="pro-info">￥<span class="cf63">15.9</span> <span class="pull-right">月销180</span></div>
					    		<div class="pro-name">产品名</div>
					    	</div>
					    	<div class="col-33 pro-cell">
					    		<span class="pro-sku">2种</span>
					    		<div class="pro-img"><img src="img/p1.png" alt="产品图" width="100%" /></div>
					    		<div class="pro-info">￥<span class="cf63">8.9</span> <span class="pull-right">月销180</span></div>
					    		<div class="pro-name">产品名</div>
					    	</div>
							</div>
							<div class="row no-gutter pro-box">
					    	<div class="col-33 pro-cell">
					    		<span class="pro-sku">4种</span>
					    		<div class="pro-img"><img src="img/p1.png" alt="产品图" width="100%" /></div>
					    		<div class="pro-info">￥<span class="cf63">15.9</span> <span class="pull-right">月销180</span></div>
					    		<div class="pro-name">产品名</div>
					    	</div>
					    	<div class="col-33 pro-cell">
					    		<div class="pro-img"><img src="img/p1.png" alt="产品图" width="100%" /></div>
					    		<div class="pro-info">￥<span class="cf63">15.9</span> <span class="pull-right">月销180</span></div>
					    		<div class="pro-name">产品名</div>
					    	</div>
							</div>
						</div>
					</div>
			  	
				</div><!-- end .content -->
				
				<!-- 购物车结算 -->
				<footer class="blancebar" id="blancebar" style="display: none;">
					<div class="row no-gutter">
						<div class="col col-20"><span class="icon icon-cart text-center"></span><span class="badge bg-red">1</span></div>
						<div class="col col-60">
							<p class="clear-mar-pad pl5">￥20<span class="ml5 ce2">(还差10.0元)</span></p>
							<p class="clear-mar-pad pl5 cf0">满30减5</p>
						</div>
						<div class="col col-20"><a href="#" class="button no-border bg-red" id="openCartDetail">下一步</a></div>
					</div>
				</footer><!-- end footer -->
				
      </div><!-- end .page -->
        
        
    </div><!-- end .page-group -->
    
    <!-- popup, panel 等放在这里 -->
    <div class="panel-overlay"></div>
    
    <!-- 购物车详情 -->
		<div class="popup popup-cart">
		  <div class="content-block clear-mar-pad">
		    <p class="header bg-black">购物车<a href="#" class="close-popup pull-right">关闭</a></p>
		    <div class="content-block-title"><span class="pull-left">已选购<span class="cf0">2</span>件商品</span> <span class="pull-right">清空购物车</span></div>
		    <div class="list-block media-list bg-white">
		    	<ul>
		    		<li>
		    			<div class="item-content">
			          <div class="item-media"><img src="img/p1.png" style='width: 2.2rem;'></div>
			          <div class="item-inner row">
			          	<div class="col-50">
			          		<div class="item-title-row">
				              <div class="item-title">产品名称</div>
				            </div>
				            <div class="item-subtitle">￥<span class="cf0">12</span></div>
			          	</div>
			            <div class="col-50">
			            	<div class="item-sum">
				            	<a class="button button-dark opt">-</a><a disabled class="button button-dark bg-gray value">1</a><a class="button button-dark opt">+</a>
				            </div>
			            </div>
			          </div>
			        </div>
		    		</li>
		    		<li>
		    			<div class="item-content">
			          <div class="item-media"><img src="img/p1.png" style='width: 2.2rem;'></div>
			          <div class="item-inner row">
			          	<div class="col-50">
			          		<div class="item-title-row">
				              <div class="item-title">产品名称</div>
				            </div>
				            <div class="item-subtitle">￥<span class="cf0">12</span></div>
			          	</div>
			            <div class="col-50">
			            	<div class="item-sum">
				            	<a class="button button-dark opt">-</a><a disabled class="button button-dark bg-gray value">1</a><a class="button button-dark opt">+</a>
				            </div>
			            </div>
			          </div>
			        </div>
		    		</li>
		    	</ul>
		    </div>
		    <footer class="blancebar">
					<div class="row no-gutter">
						<div class="col col-80">
							<p class="clear-mar-pad pl5">￥20<span class="ml5 ce2">(还差10.0元)</span></p>
							<p class="clear-mar-pad pl5 cf0">满30减5</p>
						</div>
						<div class="col col-20"><a class="button no-border bg-red" id="payBtn">去支付</a></div>
					</div>
				</footer>
		  </div>
		</div>

    <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
		<script>
			//SUI初始化
			$.init();
			
			//页面初始化
			$(function(){
				
				$('#search').focus();
				
				//添加商品到购物车
				$('.pro-cell').click(function(){
					$('#blancebar').show();
					
				});
				
				//购物车详情
				$(document).on('click','#openCartDetail', function () {
				  $.popup('.popup-cart');
				});
				
				//修改产品数量
				$('.item-sum .button.opt').click(function(){
					var opt = $(this).text();
					var obj = $(this).parent().find('.value');
					var value = obj.text();
					if(opt === '-'){
						if(value === '1'){
							return;
						}
						value--;
					}else if(opt === '+'){
						value++;
					}
					obj.text(value);
				});
				
				//去支付
				$('#payBtn').click(function(){
					$.showPreloader('支付中...')
			    setTimeout(function () {
			        $.hidePreloader();
			    }, 2000);
				});
			});
	
	
		</script>
  </body>
</html>